<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <script src="scripts/snap.svg.js"></script>
</head>
<style>
    #circle{
        transition: all 1s;
        stroke-dasharray:314,314;
        stroke-dashoffset:314;
    }
    svg:hover #circle{
        stroke-dashoffset:0;
    }
</style>
<body>

<svg id="svgout" width="1600" height="1600" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="rgb(255,150,200)">
    <defs>
        <clipPath id="cut-off-bottom">
            <rect x="0" y="0" width="200" height="100" />
        </clipPath>
    </defs>

    <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />

<!--    <rect x="100" y="100" width="200" height="200" fill="blue" />-->
<!--    <circle cx="200" cy="200" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />-->
    <marker id="markerArrow" markerWidth="10" markerHeight="7"
            refX="0" refY="3.5"  orient="auto" fill="black">
        <polygon points="0 0, 10 3.5, 0 7" />
    </marker>
    <path id="markPath" d='M200,200 L800,200' stroke='#000' stroke-dasharray="5 10"  style="marker-end: url(#markerArrow);" stroke-width="3"></path>
    <circle  r="20" fill="red">
        <animateMotion id="motion" dur="1s" begin="0;motion.end">
            <mpath xlink:href="#markPath"></mpath>
        </animateMotion>
<!--        <animate id="goright" attributeType="XML" attributeName="cx"-->
<!--         from="200" to="800" dur="1s"   begin="0;goright.end+1s" fill="freeze"></animate>-->
<!--        <animate id="goleft" attributeType="XML" attributeName="cx"-->
<!--                 from="800" to="200" dur="1s" fill="freeze"  begin="goright.end"></animate>-->
        <animate attributeType="xml" attributeName="fill" from="red" to="yellow" dur="3s" ></animate>
    </circle>

<!--    <circle cx="400" cy="500" r="20" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red">-->
    <circle  r="20" fill="red">
        <animateMotion id="animateMotion" begin="0;animateMotion.end" dur="3s" rotate="auto">
            <mpath xlink:href="#path"></mpath>
        </animateMotion>
    </circle>
    <path id="path" d="M 100 300 L 600 800 A 200 100 0 1 0 100 300" stroke-width="4" stroke="gray" fill="none"></path>
    </circle>

    <circle id="circle" cx="800" cy="80" r="50"  fill="gray" stroke-width="5" stroke="green"/>
</svg>
    <script>
        let s = Snap("#svgout");
        let offset = 50;
        let g = s.g().attr({ stroke: 'gray' });
        for (let i = 0; i <=1600 / offset; i++) {
            g.line(i * offset, 0, i * offset, 1600)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.line(0, i * offset, 1600, i * offset)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.text(0, i * offset, i * offset);
            g.text(i * offset, 20, i * offset);
        }
    </script>
</body>

</html>